<template>
    <view>
        <!-- 微信小程序环境 -->
        <view class='line'>
            <!-- <image src='../../../static/images/line.jpg' v-if="addressList.length"></image> -->
        </view>
        <view class='address-management' :class='addressList.length < 1 && page > 1 ? "fff" : ""'>
            <radio-group class="radio-group" @change="radioChange" v-if="addressList.length">
                <view class='item borRadius14' v-for="(item, index) in addressList" :key="index">
                    <view class='address' @click='goOrder(item.id)'>
                        <view class='consignee'>收货人：{{ item.realName }}<text class='phone'>{{ item.phone }}</text>
                        </view>
                        <view>收货地址：{{ item.province }}{{ item.city }}{{ item.district }}{{ item.detail }}</view>
                    </view>
                    <view class='operation acea-row row-between-wrapper'>
                        <radio class="radio" :value="index" :checked="item.isDefault">
                            <text>设为默认</text>
                        </radio>
                        <view class='acea-row row-middle' style="display: flex;    gap: 20rpx;">
                            <view style="display: flex;align-items: center;" @click='editAddress(item.id)'><u-icon
                                    name="edit-pen" size="36"></u-icon>
                                编辑</view>
                            <view style="color: red;display: flex;align-items: center;" @click='delAddress(index)'>
                                <u-icon color="red" name="close" size="36"></u-icon>删除
                            </view>
                        </view>
                    </view>
                </view>
            </radio-group>
            <!-- class='loadingicon acea-row row-center-wrapper' -->
            <view v-if="addressList.length">
                <!-- <text class='loading iconfont icon-jiazai' :hidden='loading == false'></text>{{ loadTitle }} -->
                <u-divider :text="loadTitle" textColor="#000" textSize="26rpx" lineColor="#ff6109"></u-divider>
            </view>
            <view class='noCommodity' v-if="addressList.length < 1 && page > 1">
                <view class='pictrue'>
                    <image
                        src='https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/06/16/noAddress_20250616094046A166.png'>
                    </image>
                </view>
            </view>
            <view style='height:120rpx;'></view>
        </view>
        <view class='footer acea-row row-between-wrapper'>
            <view class='addressBnt bg-color' @click='addAddress'><text class='iconfont icon-tianjiadizhi'></text>添加新地址
            </view>
            <view class='addressBnt wxbnt' @click='getWxAddress'><text class='iconfont icon-weixin2'></text>导入微信地址
            </view>
        </view>
        <!-- <home></home> -->
    </view>
</template>
<script>
import { getAddressList, setAddressDefault, delAddress, editAddress } from '../../../utils/api/user.js';
// import home from '@/components/home';

export default {
    components: {
        // home
    },
    data() {
        return {
            addressList: [],
            page: 1,
            limit: 20,
            loading: false,
            loadTitle: '加载更多'
        };
    },

    onLoad(options) {

    },
    onShow() {
        this.getAddressList(true);
    },
    methods: {
        // 获取地址列表
        getAddressList(isPage) {
            if (isPage) {
                this.page = 1;
                this.addressList = [];
            }
            if (this.loading) return;
            this.loading = true;
            getAddressList({
                page: this.page,
                limit: this.limit
            }).then(res => {
                let list = res.data.list;
                this.addressList = [...this.addressList, ...list];
                this.loading = false;
                this.loadTitle = list.length < this.limit ? '我也是有底线的' : '加载更多';
                this.page++;
            }).catch(() => {
                this.loading = false;
            });
        },
        // 设置默认地址
        radioChange(e) {
            let index = parseInt(e.detail.value);
            let address = this.addressList[index];
            if (address === undefined) return;
            setAddressDefault(address.id).then(() => {
                this.addressList.forEach((item, idx) => {
                    item.isDefault = idx === index;
                });
                uni.showToast({
                    title: '设置成功',
                    icon: 'none'
                });
            }).catch(err => {
                uni.showToast({
                    title: err,
                    icon: 'none'
                });
            });
        },
        // 删除地址
        delAddress(index) {
            let address = this.addressList[index];
            if (address === undefined) return;
            uni.showModal({
                title: '提示',
                content: '确定要删除此地址吗？',
                success: function(res) {
                    if (res.confirm) {
                         delAddress(address.id).then(() => {
                uni.showToast({
                    title: '删除成功',
                    icon: 'none'
                });
                this.addressList.splice(index, 1);
            })
                    } else if (res.cancel) {
                        
                    }
                }
            });
        
        },
        // 编辑地址
        editAddress(id) {
            uni.navigateTo({ url: `/pages_h5/myCenter/components/user_addressAdd?id=${id}` });
        },
        // 新增地址
        addAddress() {
            uni.navigateTo({ url: '/pages_h5/myCenter/components/user_addressAdd' });
        },
        // 导入微信地址
        getWxAddress() {
            let that = this;
				uni.authorize({
					scope: 'scope.address',
					success: function(res) {
						uni.chooseAddress({
							success: function(res) {
								let addressP = {};
								addressP.province = res.provinceName;
								addressP.city = res.cityName;
								addressP.district = res.countyName;
								addressP.cityId = 0;
								editAddress({
									address: addressP,
									isDefault: false,
									realName: res.userName,
									postCode: res.postalCode,
									phone: res.telNumber,
									detail: res.detailInfo,
									id: 0
									//type: 1//区别城市id（导入微信地址无城市id需要后台自己查找）;
								}).then(res => {
									that.$util.Tips({
										title: "添加成功",
										icon: 'success'
									}, function() {
										that.getAddressList(true);
									});
								}).catch(err => {
									return that.$util.Tips({
										title: err
									});
								});
							},
							fail: function(res) {
								if (res.errMsg == 'chooseAddress:cancel') return that.$util.Tips({
									title: '取消选择'
								});
							},
						})
					},
					fail: function(res) {
						uni.showModal({
							title: '您已拒绝导入微信地址权限',
							content: '是否进入权限管理，调整授权？',
							success(res) {
								if (res.confirm) {
									uni.openSetting({
										success: function(res) {
											console.log(res.authSetting)
										}
									});
								} else if (res.cancel) {
									return that.$util.Tips({
										title: '已取消！'
									});
								}
							}
						})
					}
				})
        },
        goOrder(id) {
            uni.redirectTo({ url: `/pages/users/order_confirm/index?is_address=1&addressId=${id}` });
        }
    },
    onReachBottom() {
        this.getAddressList();
    }
};
</script>
<style lang="scss" scoped>
/* 页面整体样式 */
.address-management {
    padding: 20rpx 30rpx;
    background-color: #fff;
    height: 100%;
}

.address-management.fff {
    background-color: #fff;
    height: 1300rpx;
}

.line {
    width: 100%;
    height: 3rpx;
}

.line image {
    width: 100%;
    height: 100%;
    display: block;
}

/* 地址项样式 */
.address-management .item {
    background-color: #fff;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    border-radius: 14rpx;
    box-shadow: 0 4rpx 28rpx rgba(0, 0, 0, 0.2);
}

.address-management .item .address {
    padding: 35rpx 0;
    border-bottom: 1rpx solid #eee;
    font-size: 28rpx;
    color: #282828;
}

.address-management .item .address .consignee {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
}

.address-management .item .address .consignee .phone {
    margin-left: 25rpx;
    color: #007aff;
}

/* 操作按钮区样式 */
.address-management .item .operation {
    height: 83rpx;
    font-size: 28rpx;
    color: #282828;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.address-management .item .operation .radio text {
    margin-left: 13rpx;
}

.address-management .item .operation .iconfont {
    color: #2c2c2c;
    font-size: 35rpx;
    vertical-align: -2rpx;
    margin-right: 10rpx;
}

.address-management .item .operation .iconfont.icon-shanchu {
    margin-left: 35rpx;
    font-size: 38rpx;
}

.address-management .item .operation .iconfont.icon-bianji {
    margin-left: 35rpx;
    font-size: 38rpx;
}

/* 加载和无地址提示 */
.loadingicon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
}

.noCommodity {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50rpx;
}

.pictrue {
    width: 520rpx;
    height: 420rpx;
}

.noCommodity image {
    width: 100%;
    height: 100%;
}

/* 底部操作按钮 */
.footer {
    position: fixed;
    width: 100%;
    background-color: #fff;
    bottom: 30rpx;
    height: 106rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer .addressBnt {
    width: 330rpx;
    height: 76rpx;
    border-radius: 50rpx;
    text-align: center;
    line-height: 76rpx;
    font-size: 30rpx;
    color: #fff;
    background-color: #007aff;
}

.footer .addressBnt.on {
    width: 690rpx;
    margin: 0 auto;
    background-color: #007aff;
}

.footer .addressBnt .iconfont {
    font-size: 35rpx;
    margin-right: 8rpx;
    vertical-align: -1rpx;
}

.footer .addressBnt.wxbnt {
    background-color: #fe960f;
}

.status_1 {
    display: flex;
    width: 750rpx;
    height: var(--status-bar-height);
    background-color: #e93323;
    /* 状态栏背景颜色 */
}

/* 适配iPhone X等刘海屏状态 */
@media screen and (max-width: 750rpx) {
    .status_1 {
        height: calc(var(--status-bar-height) + 20rpx);
    }
}
</style>
